CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/next/pages/sso/[id].tsx
Views: 687
1
/*

2
 *  This file is part of CoCalc: Copyright © 2022 Sagemath, Inc.

3
 *  License: MS-RSL – see LICENSE.md for details

4
 */

5


6
import { r_human_list } from "@cocalc/frontend/components/r_human_list";

7
import { Button, Layout, Typography } from "antd";

8
import Footer from "components/landing/footer";

9
import Head from "components/landing/head";

10
import Header from "components/landing/header";

11
import Main from "components/landing/main";

12
import SanitizedMarkdown from "components/misc/sanitized-markdown";

13
import { ssoNav } from "components/sso";

14
import basePath from "lib/base-path";

15
import { Customize, CustomizeType } from "lib/customize";

16
import { getOneSSO } from "lib/sso/sso";

17
import withCustomize from "lib/with-customize";

18
import Link from "next/link";

19
import { join } from "path";

20
import { SSO_SUBTITLE } from ".";

21


22
const { Paragraph, Text } = Typography;

23


24
interface Props {

25
  customize: CustomizeType;

26
  id: string;

27
  descr?: string;

28
  display: string;

29
  icon?: string;

30
  domains: string[];

31
}

32


33
export default function Signup(props: Props) {

34
  const { id, descr, display, icon, domains, customize } = props;

35


36
  function renderDescr() {

37
    const fallback = `If you have an account at this provider,

38
    you can signup here to get access to ${customize.siteName}.`;

39
    const md = `## ${display}\n\n${descr ?? fallback}`;

40
    return <SanitizedMarkdown value={md} />;

41
  }

42


43
  function renderIcon() {

44
    if (icon == null) return null;

45
    return (

46
      <div style={{ float: "right" }}>

47
        <img src={icon} width={100} height={100} />

48
      </div>

49
    );

50
  }

51


52
  function renderExclusiveDomains() {

53
    if (domains.length === 0) return null;

54
    return (

55
      <Paragraph>

56
        This is required for email addresses at{" "}

57
        {r_human_list(

58
          (domains ?? []).map((d) => (

59
            <Text code key={d}>

60
              {d}

61
            </Text>

62
          ))

63
        )}

64
      </Paragraph>

65
    );

66
  }

67


68
  function renderButton() {

69
    const href = join(basePath, "auth", id);

70
    return (

71
      <Button

72
        href={href}

73
        type="primary"

74
        size="large"

75
        style={{ marginTop: "50px" }}

76
      >

77
        Sign up using {display}

78
      </Button>

79
    );

80
  }

81


82
  function main() {

83
    return (

84
      <>

85
        {renderIcon()}

86
        {renderDescr()}

87
        {renderExclusiveDomains()}

88
        {renderButton()}

89
      </>

90
    );

91
  }

92


93
  function nav(): JSX.Element[] {

94
    return [...ssoNav(), <Link href={`/sso/{id}`}>{display}</Link>];

95
  }

96


97
  return (

98
    <Customize value={customize}>

99
      <Head title={`${SSO_SUBTITLE} – ${display}`} />

100
      <Layout style={{ background: "white" }}>

101
        <Header />

102
        <Main nav={nav()}>{main()}</Main>

103
        <Footer />

104
      </Layout>

105
    </Customize>

106
  );

107
}

108


109
export async function getServerSideProps(context) {

110
  const { id } = context.params;

111
  const info = await getOneSSO(id);

112
  return await withCustomize({ context, props: { ...info } });

113
}

114


115